<template>
  <GcTable
    v-loading="loading"
    v-model:searchKeywords="searchKeywords"
    :pagination="pagination"
    :columns="XMIND_COLUMNS"
    :tableData="tableData"
    :showFilter="false"
    searchPlaceholder="请输入思维导图名称/所属用户昵称进行搜索"
    @current-change="handlerCurrentChange"
    @search="handlerSearch">
    <template #cover="{ row }">
      <el-image
        v-if="row.cover"
        :z-index="999999"
        preview-teleported
        style="width: 30px; height: 30px"
        :src="row.cover"
        :zoom-rate="1.2"
        :preview-src-list="[row.cover]"
        fit="cover"
      />
    </template>
    <template #recommend="{ row }">
      <span
        :class="[row.recommend === 1 ? 'text-success' : 'text-ready']">
        {{ row.recommend === 1 ? '是' : '否' }}
      </span>
    </template>
    <template #operate="{ row }">
      <div class="operate-btn-group center">
        <gc-icon-button
          v-permission="'xmind-permission:btn:recommend'"
          v-if="row.recommend === 0"
          type="link"
          @click="updateXmindRecommend(row.id, 1)">推荐</gc-icon-button>
        <gc-icon-button
          v-permission="'xmind-permission:btn:recommend'"
          v-if="row.recommend === 1"
          type="link"
          @click="updateXmindRecommend(row.id, 0)">取消推荐</gc-icon-button>
      </div>
    </template>
  </GcTable>
</template>

<script setup lang="ts" name="Xmind">
import { ref } from 'vue'
import { XMIND_COLUMNS } from './const'
import type { Xmind } from '@/http/type'
import type { Pagination } from '@/@type'
import usePagination from '@/hooks/usePagination'
import { apiGetXmindList, apiUpdateXmindRecommend } from '@/http/service'
import { ElMessageBox, ElMessage } from 'element-plus'

interface ResponseCircle extends Pagination {
  dataList: Array<Xmind>
}
const { pagination, loading } = usePagination()
const tableData = ref<Array<Xmind>>([])
const searchKeywords = ref('')

/**
 * 思维导图分页列表查询
 */
async function findXmindList () {
  const searchParams = {
    pageNo: pagination.pageNo,
    pageSize: pagination.pageSize,
    searchKeywords: searchKeywords.value
  }
  loading.value = true
  try {
    const { dataList, ...pageInfo } = await apiGetXmindList<ResponseCircle>(searchParams)
    tableData.value = dataList
    Object.assign(pagination, pageInfo)
  } catch (error) {
    tableData.value = []
  } finally {
    loading.value = false
  }
}
findXmindList()

async function updateXmindRecommend (xmindId: number, recommend: 0 | 1) {
  await ElMessageBox.confirm(
    recommend === 1 ? '确认将该思维导图推荐至首页' : '确认取消该思维导图的首页推荐',
    '提示',
    { type: 'warning' }
  )
  await apiUpdateXmindRecommend({ xmindId, recommend })
  ElMessage.success(recommend === 1 ? '推荐成功' : '取消推荐成功')
  findXmindList()
}

function handlerSearch () {
  pagination.pageNo = 1
  findXmindList()
}

function handlerCurrentChange (val: number) {
  pagination.pageNo = val
  findXmindList()
}
</script>

<style lang="scss" scoped>
.pic-list {
  display: flex;
  justify-content: center;
}
</style>
